<template>
  <a-layout class="u-main">
    <a-layout-sider class="u-main-sider" :width="260" v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="u-logo">
        <img src="../../assets/logo.png" alt="" />
      </div>
      <UMenus></UMenus>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
          <MenuUnfoldOutlined v-if="collapsed" />
          <MenuFoldOutlined v-else />
        </a-button>
      </a-layout-header>
      <UContent></UContent>
    </a-layout>
  </a-layout>
</template>
<script>
import { Layout, Menu, Button } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
import UMenus from './menus.vue';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
import UContent from './content.vue';
export default defineComponent({
  components: {
    [Layout.name]: Layout,
    [Layout.Sider.name]: Layout.Sider,
    [Layout.Header.name]: Layout.Header,
    [Button.name]: Button,
    [Menu.name]: Menu,
    UMenus,
    UContent,
    MenuFoldOutlined,
    MenuUnfoldOutlined
  },

  setup() {
    let collapsed = ref(false);
    const toggleCollapsed = () => {
      collapsed.value = !collapsed.value;
    };
    return {
      toggleCollapsed,
      collapsed
    };
  }
});
</script>
<style scoped lang="sass">
@import '../../assets/css/_base.scss';
@import './main.scss';
</style>
